<template>
  <div>
    <!-- 卡片视图 -->
    <el-card shadow="always">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>运营</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>关于工作日</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 搜索框 -->
      <el-input
        style="width:280px;"
        placeholder="请输入"
        class="search"
        v-model="searchData"
        clearable>
        <i slot="prefix" class="el-input__icon el-icon-search"></i>>
        <el-button slot="append" @click="searchBtn" :disabled="isDisabled">搜索</el-button>
      </el-input>
      <!-- 数据列表 -->
      <el-table :data="tableData" border>
        <el-table-column type="index" label="#" width="75"></el-table-column>
        <el-table-column  label="年月">
          <template slot-scope="scope">
            {{scope.row.yearMonth | day}}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
        <el-table-column prop="status" label="操作">
          <template slot-scope="scope">
            <el-tooltip
              effect="dark"
              content="定义休息日"
              placement="top"
              :enterable="true">
              <el-button
                size="mini"
                type="warning"
                @click.stop="setWork(scope.row)">
                <i class="el-icon-setting" style="margin:0 auto"></i>
              </el-button>
            </el-tooltip>
            <el-tooltip
              effect="dark"
              content="设置工作日"
              placement="top"
              :enterable="true">
              <el-button
                size="mini"
                type="info"
                @click.stop="setWork(scope.row)">
                <i class="el-icon-setting" style="margin:0 auto"></i>
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="p"
        :page-sizes="[10, 20, 50, 80]"
        :page-size="limit"
        :total="count"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </el-card>

    <!-- 定义休息页 -->
    <el-dialog
      title="定义休息日"
      :visible.sync="playdayDialogVisible"
      width="30%"
      center>
      <div style="text-align:center;margin-bottom:10px">
        <div style="text-align:left;padding-left:5%">
          <div style="color:red">红色 - 休息日</div>
          <div>黑色 - 工作日</div>
        </div>
        {{this.rowData.yearMonth | day}}
      </div>
      <div class="work_div">
        <span v-for="(item,index) in 7" class="work_xq" :key="index">{{(firstDay+index)%7 | xq}}</span>
        <span @click="clickDay(item,index)" v-for="(item,index) in dayData" :class="[item.type==1?'is_work':item.type==2?'not_work':'dont_know']" :key="item.day">{{item.day.split('-')[2]}}</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="playdayDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="trueDef">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { get } from "../../../../../public/API/query";
import config from "../../../../../public/config";

export default {
  data() {
    return {
      firstDay:'',
      dayData:[],
      rowData:{},
      //搜索
      searchData: "",
      //列表数据
      tableData: [],
      //查询参数
      p: 1,
      limit: 10,
      //总条数
      count: null,
      isDisabled: false,
      // 控制定义休息页显示
      playdayDialogVisible: false,
      dateValue: "",
      date: new Date(),
      count:null,
    };
  },
  filters:{
    day(value){
      if (value) {
        var newday = value.split('-')
        newday[0] = newday[0]+'年'
        newday[1] = newday[1]+'月'
        return newday.join('')
      }
      return ''
    },
    xq(value){
      switch (value) {
        case 1:
          return '一'
          break;
        case 2:
          return '二'
          break;
        case 3:
          return '三'
          break;
        case 4:
          return '四'
          break;
        case 5:
          return '五'
          break;
        case 6:
          return '六'
          break;
        case 0:
          return '日'
          break;
      }
    }
  },
  methods: {
    trueDef(){
      // this.playdayDialogVisible = false
      console.log(this.dayData)
      var content = [];
      this.dayData.forEach(item=>{
        item.type==1||item.type==2?content.push(item):''
      })
      let params = {
        content:JSON.stringify(content),
        id:this.rowData.id
      }
      get('operate/commodity/workDays/workDaysSetSub',params,res=>{
        if (res.code == 200) {
          this.$message.success('定义成功')
          this.playdayDialogVisible = false
          this.getTableData()
        }
      })
    },
    clickDay(value,index){
      value.type!=3?
      value.type==1?this.dayData[index].type=2:this.dayData[index].type=1:''
    },
    setWork(data){
      this.rowData = data
      this.dayData = JSON.parse(data.dataJson)
      this.firstDay = new Date(this.dayData[0].day).getDay()
      while(true){
        if (this.firstDay != 1) {
          this.firstDay == 0 ? this.firstDay = 7 : ''
          var firstDayList = this.dayData[0].day.split('-')
          firstDayList[1] = firstDayList[1] - 1
          firstDayList[2] = new Date(new Date(this.dayData[0].day).getTime() - 24*60*60*1000).getDate()
          var newObj = {day:firstDayList.join('-'),type:'3'}
          this.dayData.unshift(newObj)
          this.firstDay--
        }else{
          break
        }
      }
      this.playdayDialogVisible = true
    },
    // 获取列表数据
    getTableData(title) {
      let params = {
        p:this.p,
        limit:this.limit
      }
      if (title) {
        params.title = title
      }
      get('operate/commodity/workDays/index',params,res=>{
        this.count = res.data.count
        this.tableData = res.data._list
      })
    },

    handleSizeChange(newSize) {
      this.limit = newSize;
      this.getTableData();
    },
    handleCurrentChange(newPage) {
      this.p = newPage;
      this.getTableData();
    },
    //搜索功能
    searchBtn() {
      this.getTableData(this.searchData);
    },
  },
  watch: {
    searchData: function() {
      if (!this.searchData) {
        this.getTableData();
      }
      if (this.searchData) {
        this.isDisabled = false;
      }
    },
  },

  created() {
    this.getTableData();
  },
};
</script>

<style lang="less" scoped>
.work_div{
  border: 1px solid #ccc;
  width: 90%;
  margin: auto;
  min-height: 240px;
  background: rgba(246,246,246,.3);
  font-weight: 600;
  .work_xq{
    background: rgba(246,246,246,.5);
  }
  .is_work{
    color: black;
    cursor: pointer;
  }
  .not_work{
    color: red;
    cursor: pointer;
  }
  .dont_know{
    color: rgba(0,0,0,.3);
  }
  span{
    display: inline-block;
    height: 40px;
    width: 14.2%;
    text-align: center;
    line-height: 40px;
    user-select: none;
  }
}
.el-breadcrumb {
  margin-bottom: 30px;
}
.el-input {
  margin-bottom: 30px;
  width: 280px;
  margin-right: 30px;
}
.el-pagination {
  margin-top: 30px;
}
.addRulesWrap {
  margin-left: 80px;
}
.addRules {
  position: absolute;
  right: 25%;
  bottom: 5%;
}
.disable {
  margin-left: 15px;
}
.el-range-separator {
  margin-right: 5px;
}
.topRightButton {
  margin-left: 60%;
}
.dialog-content-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}
.is-selected {
    color: #1989FA;
  }
</style>
